<template>
	<view class="content">
		<view class="Name">122 上海市宜川中学</view>
		<view class="imgG">
			<image :src="headerPic" mode="widthFix" @click="upImg"></image>
			<view class="lab1">请上传头像</view>
		</view>
		<view class="inputPsw">
			<view class="two" @click="btnSelectClick(1)">
				<view class="labName">
					学生年级
				</view>
				<view class="labVule">
					{{gradeText}} <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
				</view>
			</view>
			<view class="two" @click="btnSelectClick(2)">
				<view class="labName">
					学生班级
				</view>
				<view class="labVule">
					{{classText}} <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
				</view>
			</view>
			<view class="two" @click="btnNameClick">
				<view class="labName">
					学生姓名
				</view>
				<view class="labVule">
					{{nameText}} <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
				</view>
			</view>
			<view class="two">
				<view class="labName">
					学生性别
				</view>
				<view class="sexVule">
					
					<!-- 1 为男 2 为 女 -->
					<view @tap.stop="selectMan('2')" class="all_select_box">
							
						<uni-icons :type="sexType == '2'?'checkbox-filled':'checkbox'" :color="sexType == '2'?'#4CD964':'#ccc'" size="24"></uni-icons>
							
						<view class="all_select">女</view>
					</view>
					<view @tap.stop="selectMan('1')" class="all_select_box">
							
						<uni-icons :type="sexType == '1'?'checkbox-filled':'checkbox'" :color="sexType == '1'?'#4CD964':'#ccc'" size="24"></uni-icons>
							
						<view class="all_select">男</view>
					</view>
				</view>
			</view>
			<view class="two" @click="btnSelectClick(3)">
				<view class="labName">
					学生年龄
				</view>
				<view class="labVule">
					{{ageText}} <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
				</view>
			</view>
		</view>
		<view v-if="isEdit" class="btn" @click="btnAddAddr">
			修改完成
		</view>
		<view v-else class="btn" @click="btnAddAddr">
			添加
		</view>
		<uni-popup ref="popSex" type="bottom">
			<view class="categoryContent">
				<view class="pickerBtn">
					<view class="popBnt cancer" @click="cancerSex">取消</view>
					<view class="popBnt confirm" @click="confirmSex">确定</view>
				</view>
				 <view class="pickerView">
				   <picker-view class="picker" indicator-class="indicator" :value="showSexAndAgeStrat" @change="bindSexChange" @pickstart='bindSexStartChange' @pickend='bindSexEndChange'>
						<picker-view-column class="column">
						  <view v-for="(item, index) in showSexAndAgeData" :key="index">{{item.valueName}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popupContent">
				<view class="popupName">
					请输入姓名
				</view>
				<view class="inputG">
					<input type="text" />
				</view>
				<view class="popupBtn">
					<view class="popupBnt" @click="btncancerClick">取消</view>
					<view class="popupBnt" @click="btnconfirmClick">确定</view>
				</view>
		    </view>
			<!-- <uni-popup-dialog message="请输入姓名" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog> -->
		</uni-popup>
	</view>
</template>

<script>
	// import uniPopup from '../../components/uni-popup/uni-popup.vue';
	
	// import uniPopupDialog  from '../../components/uni-popup-dialog/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				//年级
				gradeArr:[{valueName:'托班'},{valueName:'中班'},{valueName:'小班'},{valueName:'大班'}],
				gradeSel:[0],
				gradeText:'',
				CategoryIndex:-1,
				showSexAndAgeStrat:[0],
				showSexAndAgeData:[],
				//班级
				classArr:[{valueName:'狮子班'},{valueName:'斑马班'},{valueName:'小马班'},{valueName:'蝴蝶班'},{valueName:'大象班'},{valueName:'猫咪班'}],
				classSel:[0],
				classText:'',
			    headerPic:'../../static/img_upload.png',
				nameText:'',
				ageText:'',
				ageArr:[],
				ageSel:[0],
				sexType:-1,
				isEdit:false
				
			}
		},
		onLoad(option) {
			
			if (option.type) {
				
				this.isEdit = true
				
			}
		
		let ageArr = [];
		for (let i = 2; i < 21; i++) {
			
			ageArr.push({valueName:''+i});
		}
		this.ageArr= ageArr
		   
			
		},
		// components:{
		// 	uniPopup
		// },
		methods: {
			btnNameClick(){
				this.$refs.popup.open();
			},
			btncancerClick(){
				this.$refs.popup.close();
			},
			btnconfirmClick(){
				this.$refs.popup.close();
			},
			 close(done){
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
				// ...
				done()
			},
			confirm(done,value){
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
				// ...
				done()
			},
			toSetting(){
				uni.navigateBack({
					delta:1
				})
			},
			upImg(){
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success(resinfo) {
						console.log('resinfo',resinfo);
						if (resinfo.errMsg == "chooseImage:ok") {
							this.headerPic = resinfo.tempFilePaths[0]
						} else{
							uni.showToast({
								icon:'none',
								title:'选取失败'
								
							})
						}
						
					}
					
					
				})
			},
			btnAddAddr(){
				uni.navigateBack({
					delta:3
				})
			},
			selectMan(index){
				this.sexType = index
			},
			btnSelectClick(index){
				
				this.CategoryIndex=index;		
				if (index == 1) {
				//选择性别
				this.showSexAndAgeData=this.gradeArr;
				
				// #ifdef MP-WEIXIN
				this.showSexAndAgeStrat=this.gradeSel;
				// #endif
				
				
				} else if(index == 2){
					
					// console.log('de',this.customizatList[index].changeSel);
					
				this.showSexAndAgeData=this.classArr;
				this.showSexAndAgeStrat=this.classSel;
				
				}else if(index == 3){
					this.showSexAndAgeData=this.ageArr;
					this.showSexAndAgeStrat=this.ageSel;
				}
				
				// #ifdef APP-PLUS
				this.showSexAndAgeStrat=[0];
				// #endif
				
				this.$refs.popSex.open();
			},
			//取消
			cancerSex(){
				this.$refs.popSex.close();
			},
			confirmSex(){
				this.$refs.popSex.close();
				let index = this.CategoryIndex;
				if (index == 1) {
					//品类
					this.gradeText = this.showSexAndAgeData[this.showSexAndAgeStrat[0]].valueName;
					
					// #ifdef MP-WEIXIN
					this.gradeSel = this.showSexAndAgeStrat
					// #endif
					
				} else if(index == 2){
					
					this.classText = this.showSexAndAgeData[this.showSexAndAgeStrat[0]].valueName;
					// #ifdef MP-WEIXIN
					this.classSel = this.showSexAndAgeStrat
					// #endif
				}else if(index == 3){
					
					this.ageText = this.showSexAndAgeData[this.showSexAndAgeStrat[0]].valueName;
					// #ifdef MP-WEIXIN
					this.ageSel = this.showSexAndAgeStrat
					// #endif
				}
				
			},
			bindSexChange(e){
				console.log('bindCategoryChange',e);
				this.showSexAndAgeStrat=e.detail.value;
				
			},
			bindSexStartChange(){
				console.log('321开始转动');
				this.canBtn = true
				
			},
			bindSexEndChange(){
				console.log('321结束转动');
				this.canBtn  =false
			},
			
		}
	}
</script>

<style>
    .user-info {
	    width: 100%;
		height: 150rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.topView{
		
		/* #ifdef APP-PLUS */
	    padding-top: calc(22upx + var(--status-bar-height));
		/* #endif */
		/*#ifdef MP-WEIXIN */
		padding-top: calc(22upx + var(--status-bar-height));
		/* #endif */
		/*#ifdef H5 */
		padding-top: calc(48upx + var(--status-bar-height));
		/* #endif */
		display: flex;
		justify-content: space-between;

	}
	
	.setIcon{
		width: 60rpx;
		height: 60rpx;
	}
	
	.Name{
		color: #000;
		font-size: 38rpx;
		margin-top: 30rpx;
		font-weight: 400;
		text-align: center;
	}
	.imgG{
		margin-top: 60rpx;
		
	}
	.imgG image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin-left: 275rpx;
		
	}
	.imgG .lab1{
		
		color: #ccc;
		font-size: 30rpx;
		margin-top: 20rpx;
		font-weight: 400;
		text-align: center;
		
	}
	.inputPsw{
		margin-top: 40rpx;
		padding: 0 40rpx;
	}
	.inputPsw .two{
		background-color: #FFFFFF;
		height: 110upx;
		border-bottom: 1upx solid #f2f2f2;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.two .labName{
		color: #ccc;
		font-size: 30rpx;
	}
	.two .labVule{
		color: #000;
		font-size: 28rpx;
	}
	.labVule .uni-icons{
		position: relative;
		top: 4rpx;
	}
	.sexVule{
		display: flex;
	    flex-direction: row;
	}
	.all_select_box {
		width: 110rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 20rpx;
		/* padding-left: 30upx; */
	}
	.all_select {
		width: 40rpx;
		/* padding-left: 20rpx; */
		color: #666;
		font-size: 28rpx;
		text-align: right;
	}
	.btn{
		   color: #fff;
		   background-color: #dd524d;
		   height: 80rpx;
		   line-height: 80rpx;
		   border-radius: 40rpx;
		    /* margin-top: 30rpx; */
		   margin: 60rpx 40rpx;
		   font-size: 32rpx;
		   text-align: center;
		   
	   }
	   .categoryContent{
	   		width: 750upx;
	   		background-color: #fff;
	   		
	   	}
	   	.picker {
	   	  background-color: #fff;
	   	  width: 100%;
	   	  height: 247rpx;
	   	  position: absolute;
	   	  bottom: 0;
	   	  z-index: 1;
	   	  }
	   	  .column {
	   		font-size: 40rpx;
	   		color: #000;
	   		text-align: center;
	   		line-height: 68rpx;
	   	  }
	   	  .indicator {
	   		  height: 68rpx;
	   		  border-top: 1rpx solid #ADB0A7;
	   		  border-bottom: 1rpx solid #ADB0A7;
	   		}
	   	.pickerBtn{
	   		width: 100%;
	   		height: 101rpx;
	   		line-height: 101rpx;
	   		background-color: #fff;
	   		font-size: 30rpx;
	   		display: flex;
	   		justify-content: space-between;
	   		position: absolute;
	   		bottom: 248rpx;
	   		border-bottom: 1rpx solid #ADB0A7;
	   		z-index: 1;
	   	}
		.popBnt{
				width: 80upx;
				text-align: center;
			}
			.cancer {
				color: #999;
			}
			.confirm{
				color: #333;
			}
			.popupContent{
				/* margin:0 40rpx; */
				background-color: #f2f2f2;
				/* height: 400rpx; */
				border-radius: 20rpx;
				padding-top: 40rpx;
				width: 500rpx;
			}
			.popupName{
				font-size: 33rpx;
				font-weight: 400;
				text-align: center;
				
			}
			.inputG{
				margin-top: 20rpx;
				padding: 30rpx;
				/* height: 40rpx; */
			}
			.inputG input{
				background-color: #fff;
				border:  1rpx solid #666;
				width: 100%;
				padding-left: 5rpx;
				caret-color:#4CD964;
			}
			.popupBtn{
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #ccc;
				margin-top: 10rpx;
			}
				
			.popupBnt{
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #007AFF;
				font-weight: bold;
				font-size: 34rpx;
			}
			.popupBnt:last-child{
				border-left: 1rpx solid #ccc;
			}
</style>
